<template>
    <div class="home">
        <el-container>
            <el-header>
                <img src="hander.png" alt="">
                <el-button @click="tui">退出</el-button>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '63px' : '200px'">
                    <div class="top" @click="isCollapse = !isCollapse">|||</div>
                    <el-menu default-active="2" class="el-menu-vertical-demo" text-color="#fff"
                        background-color="#333744" router unique-opened :collapse="isCollapse"
                        :collapse-transition="false">
                        <el-submenu :index="'' + item.id" v-for="item in asideList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{ item.authName }}</span>
                            </template>
                            <el-menu-item :index="it.path" v-for="it in item.children" :key="it.id" @click="getAuthName(item.authName,it.authName)">
                                <i class="el-icon-location"></i>
                                <span>{{ it.authName }}</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script>
import { getAside } from '@/utils/Home'
import store from '@/store/index'
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            asideList: [],
            isCollapse: false
        }
    },
    methods: {
        ...mapMutations(['addAuthName']),
        async getAsideList() {
            let { data: res } = await getAside()
            this.asideList = res.data
            let routerList = []
            this.asideList.forEach(item => {
                item.children.forEach(it => {
                    let obj = {
                        name: it.path[0].toUpperCase() + it.path.slice(1),
                        path: '/' + it.path
                    }
                    routerList.push(obj)
                })
            })
            store.commit('routerModule/addRouterModule',routerList)
        },
        getAuthName(a,b){
           let obj = {a,b}
           this.addAuthName(obj)

        },
        tui(){
            this.addAuthName({}),
            this.$router.push('/login')
        }
    },
    mounted() {
        this.getAsideList()
    }
}
</script>

<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    min-width: 1200px;
    .el-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #373d41;
    }

    .el-aside {
        background: #333744;
    }
}

.el-container {
    width: 100%;
    height: 100%;
}

.top {
    color: white;
    text-align: center;
}
</style>